<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .aa{
            float: left;
        } */
    </style>
</head>

<body>
    <!-- 写一个商品列表页，要有图片（可以使用外网），商品名，点击时要能弹出商品简介与图片名称 -->
    <div class="main">
        <div class="list">
            <img @click="show(0)" width="200" height="200" :src="list[0].image" alt="">

            <div>{{list[0].name}}</div>
            <div>{{list[0].price}}</div>
        </div>
        <div class="list aa">
            <img @click="show(1)" width="200" height="200" :src="list[1].image" alt="">

            <div>{{list[0].name}}</div>
            <div>{{list[1].price}}</div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    list:[
                        {id:0,data:100,price:"￥58",name:"麻辣小龙虾",text:"麻辣龙虾，或称麻辣小龙虾，简称麻小，是近十年来夜宵摊、大排档和宾馆小吃的看家菜",image:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff2cfda3c-2e88-494a-8d2b-856f6c7da98c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682825288&t=039b1ab42463cdaf3f088e5239404870"},
                        {id:0,data:100,price:"￥20",name:"新疆炒米粉",text:"新疆炒米粉是中国新疆维吾尔自治区的一道小吃,属新疆菜。 炒米粉使用的米粉比较粗有嚼劲,味道有微辣、中辣、爆辣,汤汁颜色浓郁。 ",image:"http://t14.baidu.com/it/u=3955736285,1315148693&fm=224&app=112&f=JPEG?w=500&h=500"}
                    ]
                }

            },
            methods:{
                show:function(id){
                    let obj=this.list[id]
                    // alert(obj.name);
                    alert(obj.text)
                    // obj.text
                }
            }
        }).mount("body")
      
    </script>
</body>

</html>